<template>
	<div>
	     <mt-header title="批单信息">
		  <router-link to="/" slot="left">
		    <mt-button icon="back" >返回</mt-button>
		  </router-link>
		  <mt-button icon="more" slot="right" @click="more"></mt-button>
		</mt-header>
		<mt-popup  v-model="popupVisible" position="">
			<div class="more index1">首页</div>
			<div  class="more index2">消息</div>
			<div class="more index3">帮助</div>
		</mt-popup>
	
	    <div class="img">
	    	<img src="../../../static/img/shouye.png" style="height: 100%;"/>
	    </div>
	    
	    <div class="one">
	    	<div class="one-img imgi">
	    		<img src="../../../static/img/clcxicon@2x.png" class="one-img_i">
	    		<div class="one-div">车辆年检查询</div>
	    	</div>
	    	<div class="one-img imgii">
	    		<img src="../../../static/img/clcxicon@2x.png"  class="one-img_i">
	    	    <div class="one-div">非事故道路救援</div>
	    	</div>
	    </div>
	    <div class="two">
	    	<div class="two-img img_i">
	    		<img src="../../../static/img/clcxicon@2x.png" class="one-img_i">
	    	     <div class="one-div">酒后代驾</div>
	    	</div>
	    	<div class="two-img img_ii">
	    		<img src="../../../static/img/clcxicon@2x.png" class="one-img_i">
	    	     <div class="one-div">车辆违章查询</div>
	    	</div>
	    </div>
	</div>
</template>

<script>
export default {
   name: 'SpecialService',
   data () {
      return {
      	popupVisible:false,
    }
  },
  methods:{
	more(){
		this.popupVisible = true
	}
  }
}
</script>
<style scoped>  
.mint-tab-container{
	background: #eee;
}
.mint-popup{
	z-index: 2003;
    width: 50%;
    background: #000;
    color: #fff;
    border-radius: 10px;
    position: fixed;
    top: 110px;
    margin-left: 90px;
}
.more{
	height: 43px;
	line-height: 43px;
	border-bottom: 1px solid #fff;
}
.index1{
	background-image: url(../../../static/img/icon@2x.png);
	background-repeat: no-repeat;
    background-size: 16%;
    background-position: 20px;
}
.index2{
	background-image: url(../../../static/img/icon@2x.png);
	background-repeat: no-repeat;
    background-size: 16%;
    background-position: 20px;
}
.index3{
	background-image: url(../../../static/img/icon@2x.png);
	background-repeat: no-repeat;
    background-size: 16%;
    background-position: 20px;
}

.img{
	height: 210px;
}
.one{
	margin-bottom: 15px;
	margin-top: 15px;
}
.one,.two{
	display: flex;
	height: 180px;
}
.one-img{
	width: 48%;
	height: 100%;
}
.two-img{
	width: 48%;
		height: 100%;
}
.imgi{
   background:#F55F60;
   margin-right: 4%;
   margin-bottom: 20px;
}
.imgii{
   background:#F8AD36;
}
.img_i{
   background:#24AB88;
   margin-right: 4%;
    margin-bottom: 20px;
}
.img_ii{
   background:#33C0F5;
}
.one-img_i{
	width: 35%;
    margin-top: 20px;
}
.one-div{
	font-size: 18px;
    margin-top: 10px;
    color: #fff;
    font-weight: 700;
}
</style>
